/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  ScrollView,
  TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper';

const {screenWidth}=Dimensions.get('window');

export default class WorkScreen extends Component {
    
  constructor(props){
    super(props);
    this.state={
      swiperShow:false,
      projectName:'风云国际大厦一期',
      groupName:'钢筋班组'
    }
  }

  componentDidMount(){
    this.timer=setTimeout(()=>{
       this.setState({swiperShow:true});
    },0);
  }

  componentWillUnmount(){ 
    this.timer&&clearTimeout(this.timer);
  }

  returnSwiper=()=>{
     if(this.state.swiperShow){
       return <Swiper style={styles.wrapper} height={120} width={screenWidth} horizontal={true} autoplay={false}
       dot={<View style={{backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
       activeDot={<View style={{backgroundColor: '#000', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}>
         <Image resizeMode='stretch' style={styles.image} source={require('../../image/banner/banner1.jpg')} />
         <Image resizeMode='stretch' style={styles.image} source={require('../../image/banner/banner2.jpg')} />
         <Image resizeMode='stretch' style={styles.image} source={require('../../image/banner/banner3.jpg')} />
       </Swiper>
     }else{
       return <View style={{height:160,width:screenWidth}}></View>
     }
  }

  returnLine=()=>{
    return <View style={{height:1,backgroundColor:'#e1e2e6',marginLeft:15,marginTop:4,marginRight:15}}></View>
  }

  returnSpace=()=>{
    return <View style={{height:10,backgroundColor:'#f2f3f5'}}></View>
  }

  

  _goScreenForResult=()=>{
    this.props.navigation.navigate('ChangeGroup',{
      callBack:(data)=>{
           this.setState({
               projectName:data.projectName,
               groupName:data.groupName 
           });  
      }
    });
   
  }


  _onFunctionClick(type){
     switch(type){
        case 1:
         this.props.navigation.navigate('HourTally');
          break;
        case 2:
          break;
        case 3:
          break;
        case 4:
         this.props.navigation.navigate('HourTally');
          break;
        case 5:
          break;
        default:
          break;
     }
  }

  render() {

    return (
      <ScrollView removeClippedSubviews={false}>
        {this.returnSwiper()}
        <View style={styles.container}>
            <View style={{flexDirection:'row',height:72,marginLeft:15,marginRight:15}}>
               <Image style={styles.header} source={require('../../image/icon_chat_photo.png')}></Image>
               <View style={{position:'relative',flex:1}}>
                  <View style={{flexDirection:'row',alignItems:'center',marginTop:12}}>
                  <Text style={[styles.text,{marginLeft:8,marginTop:4}]}>{this.state.groupName}</Text> 
                  <Image style={{marginLeft:8}} source={require('../../image/widget/icon_xiangmu.png')}></Image> 
                  </View>
                  <Text style={[styles.subText,{position:'absolute',left:8,bottom:16}]}>{this.state.projectName}</Text> 
               </View>
               <TouchableOpacity style={{alignSelf:'center'}} onPress={this._goScreenForResult}>
               <Text style={{alignSelf:'center',borderColor:'#ff7733',borderWidth:1,borderRadius:4,
               paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:1,fontSize:16,color:'#ff7733'}}>切换班组</Text>
               </TouchableOpacity>
            </View> 
            {this.returnSpace()}
            <Text style={[styles.subText,{marginTop:8,marginLeft:15}]}>实名制考勤管理</Text>
            {this.returnLine()}
            <View style={styles.functionContain}>
                <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                <Image resizeMode='stretch'  source={require('../../image/work/icon_work_daka.png')}></Image>
                <Text style={styles.functionTitle}>考勤打卡</Text>
                </View>
                <View style={{justifyContent:'center',alignItems:'center' ,flex:1}}>
                <Image resizeMode='stretch'  source={require('../../image/work/icon_work_kaoqing.png')}></Image>
                <Text style={styles.functionTitle}>我的考勤</Text>
                </View>
                <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                <Image resizeMode='stretch'  source={require('../../image/work/icon_work_kaoqing.png')}></Image>
                <Text style={styles.functionTitle}>班组考勤</Text>
                </View>
            </View>

            {this.returnSpace()}
            <Text style={[styles.subText,{marginTop:8,marginLeft:15}]}>记账管理</Text>
            {this.returnLine()}
            <View style={styles.functionContain}>
                <TouchableOpacity style={{justifyContent:'center',alignItems:'center',flex:1}} onPress={()=>this._onFunctionClick(4)}>
                <Image resizeMode='stretch'  source={require('../../image/work/icon_work_jizhang1.png')}></Image>
                <Text style={styles.functionTitle}>工时记账</Text>
                </TouchableOpacity>
                <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                <Image resizeMode='stretch'  source={require('../../image/work/icon_work_jizhang2.png')}></Image>
                <Text style={styles.functionTitle}>包工记账</Text>
                </View>
                <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                <Image resizeMode='stretch'  source={require('../../image/work/icon_work_jizhang3.png')}></Image>
                <Text style={styles.functionTitle}>借支记账</Text>
                </View>
            </View>

            {this.returnSpace()}
            <Text style={[styles.subText,{marginTop:8,marginLeft:15}]}>工资管理</Text>
            {this.returnLine()}
            <View style={styles.functionContain}>
                <View style={{justifyContent:'center',alignItems:'center',flex:1} }>
                <Image resizeMode='stretch'  source={require('../../image/work/icon_work_gongzi1.png')}></Image>
                <Text style={styles.functionTitle}>我的考勤工资</Text>
                </View>
                <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                <Image resizeMode='stretch'  source={require('../../image/work/icon_work_gongzi2.png')}></Image>
                <Text style={styles.functionTitle}>班组考勤工资</Text>
                </View>
                <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                <Image resizeMode='stretch'  source={require('../../image/work/icon_work_gongzi3.png')}></Image>
                <Text style={styles.functionTitle}>记账工资</Text>
                </View> 
            </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width:screenWidth,
    backgroundColor: '#ffffff',
  },

  wrapper: {
    height:120
  },

  slide: {
    height: 80,
    // width:screenWidth,
    // flex:1,
    // justifyContent: 'center',
    // alignItems: 'center',
    // backgroundColor: 'transparent'
  },

  text: {
    color: '#000000',
    fontSize: 16,
    fontWeight: 'bold'
  },

  image: {
    width:screenWidth,
    height: 120,
  },
  header:{
    width:48,
    height:48,
    alignSelf:'center',
  },
  subText:{
    color: '#8d9199',
    fontSize: 14,
    fontWeight: 'bold'
  },
   functionContain:{
     flexDirection:'row',
    //  justifyContent:'space-between',
     alignItems:'center',
     marginTop:12,
    //  marginLeft:35,
    //  marginRight:35,
     marginBottom:12
   },
   functionTitle:{
     fontSize:12,
     color:'#5c5f66',
     marginTop:4
   }
});
